<template>
  <a-modal
    :visible="visible"
    centered
    :title="$t('key.achievementsRecorded')"
    :okText="$t('button.submit')"
    :cancelText="$t('button.close')"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :width="900"
    @cancel="() => { $emit('cancel') }"
    @ok="submitCheck"
    >
    <a-table
      rowKey="id"
      :columns="columns"
      :dataSource="cjksxsmdList"
      :pagination="false"
      :scroll="{ y: 300 }">
      <template slot="xsxh" slot-scope="xs, record,index">
        <div :key="index">
          <!-- <a-input style="width: 200px" enter-button v-model="record.xh" @change="onChange(record)"/> -->
          <a-select style="width: 100%" placeholder="" v-model="record.xh" show-search @search="onSearch" @change="onChange(record)">
              <a-spin v-if="kcLoading" slot="notFoundContent" size="small"/>
            <a-select-option v-for="(item,index) in xsxx" :key="index" :value="item.xh">
              {{item.xh}}
            </a-select-option>
          </a-select>
        </div>
      </template>
      <!-- <a-input slot="xsxh" slot-scope="xs, record" v-model="record.xh"/> -->
      <a-input slot="xsxm" slot-scope="xm, record" v-model="record.xm"/>
      <a-input slot="xsyx" slot-scope="yx, record" v-model="record.yx"/>
      <template slot="kscj" slot-scope="xs, record">
        <a-input v-if="params.cjlx !== '02'" v-model="record.kscj"/>
        <a-select v-else v-model="record.kscj" style="width: 100%">
          <a-select-option value="A">A</a-select-option>
          <a-select-option value="B">B</a-select-option>
          <a-select-option value="C">C</a-select-option>
          <a-select-option value="D">D</a-select-option>
        </a-select>
      </template>
      <!-- <template slot="xkzt" slot-scope="xs, record">
        <a-select style="width: 100%" v-model="record.xkzt">
          <a-select-option value="01">未修</a-select-option>
          <a-select-option value="02">在修</a-select-option>
          <a-select-option value="03">已修</a-select-option>
          <a-select-option value="04">重修</a-select-option>
          <a-select-option value="05">重修中</a-select-option>
          <a-select-option value="06">补考</a-select-option>
          <a-select-option value="07">缓考</a-select-option>
        </a-select>
      </template> -->
     
      <a slot="action" slot-scope="xs, record, index" @click="deleteStu(index)">{{$t('button.delete')}}</a>
    </a-table>
    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">{{$t('button.add')}}</a-button>
    
    <coverModal
      ref="cover"
      :visible="showCover"
      @cancel="cancelCheck"
      @coverCheck="coverCheck"
    />
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'
import coverModal from './coverModal'

export default {
  props: ['visible','modelForm'],
  data () {
    return {
      kcLoading: false,
      xsxx:[],
      params: {},
      cjksxsmdList: [],
      confirmLoading: false,
      showCover: false,
      columns: [
        {
          title: this.$t('key.xh'),
          width: '200px',
          scopedSlots: { customRender: 'xsxh' }
        },
        {
          title: this.$t('key.name'),
          width: '200px',
          scopedSlots: { customRender: 'xsxm' }
        },
        {
          title: this.$t('key.yx'),
          width: '200px',
          scopedSlots: { customRender: 'xsyx' }
        },
        {
          title: this.$t('key.cj'),
          width: '150px',
          scopedSlots: { customRender: 'kscj' }
        },
        // {
        //   title: this.$t('key.xkzt'),
        //   width: '150px',
        //   scopedSlots: { customRender: 'xkzt' }
        // },
        {
          title: this.$t('key.option'),
          width: '70px',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  components: {
    coverModal
  },
  watch:{
    visible(){
      this.onSearch()
    }
  },
  methods: {
    newRow () {
      this.cjksxsmdList.push({})
    },
    deleteStu (i) {
      this.cjksxsmdList.splice(i, 1)
    },
    onSearch(value){
      this.kcLoading = true
      console.log(this.modelForm)
       let params = {
        xh: value?value:'',
        kcyx: this.modelForm.kcyx,
        kcdm: this.modelForm.kcdm,
        ksnj: this.modelForm.ksnj,
        ksxn: this.modelForm.ksxn,
        ksxq: this.modelForm.ksxq,
      }
      
      this.$api.cultivate.scoreSubAddList(params).then((res) => {
        this.xsxx = res.data
        this.kcLoading = false

      })
    },
    onChange(record){
      console.log(record)
      this.xsxx.map((item,index) => {
        if(item.xh == record.xh){
          this.$set(record,'xm',item.xm)
          this.$set(record,'yx',item.ssyxmc)
          if(item.kscj){
            this.$set(record,'kscj',item.kscj)

          }
        }
      })
    },
    submitCheck () {
      let index = this.cjksxsmdList.findIndex(cj => {
        return !cj.kscj || !cj.xh
      })
      if (index === -1) {
        this.confirmLoading = true

        let xscjExistParams = Object.assign({}, this.params, {
          xsxhList: this.cjksxsmdList.map(s => {
            return s.xh
          })
        })
        console.log(xscjExistParams)
        this.$api.cultivate.kccjXscjExist(xscjExistParams).then(res => {
          // console.log(res)
          if (res.data.ytj.length) {
            this.showCover = true
            this.$refs.cover.params = res.data.ytj
          } else {
            this.addKccjDrcjlr()
          }
        })        
      } else {
        this.$message.warn('请输入完整的成绩')
      }
    },
    addKccjDrcjlr() {
      let params = Object.assign({}, this.params, {
        cjksxsmdList: this.cjksxsmdList.map(s => {
          s.cjlxm = this.params.cjlx
          return { ...s, xsxh: s.xh }
        })
      })
      
      this.$api.cultivate.kccjDrcjlrAdd(params).then(res => {
        // console.log(res)
        this.$message.success(res.msg)
        this.$emit('cancel')
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    cancelCheck() {
      this.showCover = false
      this.confirmLoading = false
    },
    coverCheck() {
      this.showCover = false
      this.confirmLoading = false
      this.addKccjDrcjlr()  
    }
  }
}
</script>

<style scoped lang="less">
</style>
